<template>
  <div id="app">
    <Header :key="updateKey" @updateKeyFn="updateKeyFn" />
    <Nav />
    <router-view />
    <Login @updateKeyFn="updateKeyFn"/>
    <Footer />
    <transition name="fade">
      <Toast v-show="$store.state.toast.isShowToast" />
    </transition>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'
import Footer from '@/components/Footer.vue'
import Login from '@/components/Login.vue'
import Toast from '@/components/home/Toast.vue'
export default {
  data() {
    return {
      updateKey : 0
    }
  },
  components: {
    Header,
    Nav,
    Footer,
    Login,
    Toast
  },
  methods:{
    updateKeyFn() {
      this.updateKey++;
    },
  },
}
</script>
 
<style lang = "less" >
.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active {
    transition: opacity, 1s;
}
.fade-enter-to,.fade-leave {
    opacity: 1;
}
</style>
